<template>
  <n-page-header @back="$router.replace('/account')">
    <template #title>
      <n-grid x-gap="64" :cols="2">
        <n-gi>
          <n-space :size="[32,0]">
            子账户
            <n-text type="primary">15262299328</n-text>
          </n-space>
        </n-gi>
        <n-gi>
          <n-space :size="[32,0]">
            账户状态
            <n-switch :value="true"></n-switch>
          </n-space>
        </n-gi>
      </n-grid>
    </template>
    <template #extra>
      <n-space :size="[32,0]">
        最后登录
        <n-text type="primary">2022-04-12 12:03:23</n-text>
      </n-space>
    </template>
    <n-card :bordered="false" class="tab-card">
      <n-tabs type="line" animated>
        <n-tab-pane name="account-set" tab="账户设置">
          <n-form size="large" label-placement="left" label-align="right" :label-width="88">
            <n-form-item label="用户名">
              <n-space class="w-[752px]" justify="space-between" align="center">
                <n-text class="text-base">跳跳</n-text>
                <n-button class="w-[120px]" type="primary" size="large">修改</n-button>
              </n-space>
            </n-form-item>
            <n-form-item label="邮箱号">
              <n-space class="w-[752px]" justify="space-between" align="center">
                <n-text class="text-base">18814656028@163.com</n-text>
                <n-button class="w-[120px]" type="primary" size="large">更改</n-button>
              </n-space>
            </n-form-item>
            <n-form-item label="密码">
              <n-space class="w-[752px]" justify="space-between" align="center">
                <n-text type="success" class="text-base">已设置</n-text>
                <n-button class="w-[120px]" type="primary" size="large">修改</n-button>
              </n-space>
            </n-form-item>
            <n-form-item label="账户备注">
              <n-space class="w-[752px]" justify="space-between" align="center">
                <n-input placeholder="请输入备注"></n-input>
                <n-button class="w-[120px]" type="primary" size="large">保存</n-button>
              </n-space>
            </n-form-item>
          </n-form>
        </n-tab-pane>
        <n-tab-pane name="index-template" tab="首页模板">
          <n-space vertical :size="[0,14]">
            <n-space vertical :size="0">
              <n-h2 class="text-[#00000099]">首页模板设置</n-h2>
              <n-form size="large" label-placement="left" label-align="left" :label-width="104">
                <n-form-item label="首页模板设置">
                  <n-select placeholder="请选择首页模板"></n-select>
                </n-form-item>
              </n-form>
            </n-space>
            <n-space vertical :size="0" class="w-[640px]">
              <n-h2 class="text-[#00000099]">模板预览</n-h2>
              <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng44e50c9a3c6ecbdcd5e2ebc7480943666fb6322057c4cdea47b6d6ef693c51e2"
              />
              <div class="mt-6 text-center">
                <n-text class="text-[#000000E6] text-base">苹果QQ跳转-精简版</n-text>
              </div>
            </n-space>
          </n-space>
        </n-tab-pane>
        <n-tab-pane name="jump-template" tab="跳转模板">
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </n-page-header>
</template>

<script setup>
</script>

<style lang="less" scoped>
.n-page-header-wrapper {
  &:deep(.n-page-header) {
    height: 80px;
    padding-left: 20px;
    padding-right: 48px;
    border-radius: 2px;
    background-color: #FFFFFF;

    .n-page-header__main {
      .n-page-header__back {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid;
        border-radius: 2px;
        margin-right: 70px;
      }
    }

    .n-page-header__extra {

    }
  }

  &:deep(.n-page-header-content) {
    .n-card {
      min-height: calc(100vh - 212px);

      .n-card__content {
        .n-tabs--line-type {
          .n-tabs-pane-wrapper {
            .n-tab-pane {
              padding-top: 33px;
            }
          }
        }
      }
    }
  }
}
</style>
